<template>
	<view class="profile-container">
		<!-- 用户基本信息 -->
		<view class="user-info">
			<view class="nav"></view>
			<view style="width: 150rpx;height: 100rpx;margin-top: 10rpx;margin-left: 20rpx;">
				<text class="username">用户名</text>
				<text class="birthdate">1996-11-02</text>
			</view>
			<view @click="getUser" style="width: 50rpx;height: 50rpx;background-color:#f4fff4 ;border-radius: 50%;
				line-height: 60rpx;text-align: center;margin-top: 20rpx;margin-left: 20rpx;">
				<image src="/static/My/bianji.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
			</view>
		</view>

		<!-- 主要功能入口 -->
		<view class="section">
			<text class="section-title"><text style="margin-left: 20rpx;">我的档案</text></text>
			<view class="function-buttons">
				<view style="width: 120rpx;text-align: center;margin-top: 20rpx;" @click="getShop">
					<image src="/static/My/Guahao.png" mode="" style="width: 80rpx;height: 80rpx;"></image>
					<view style="font-size: 28rpx;">挂号订单</view>
				</view>
				<view style="width: 120rpx;text-align: center;margin-top: 20rpx;" @click="getBingshi">
					<image src="/static/My/Bingli.png" mode="" style="width: 80rpx;height: 80rpx;"></image>
					<view style="font-size: 28rpx;">过往病史</view>
				</view>
			</view>
		</view>

		<view class="divider"></view>

		<!-- 健康数据 -->
		<view class="section">
			<view style="display: flex;justify-content: space-between;">
				<view style="display: flex;justify-content:space-between;width: 400rpx;">
					<text class="section-title">
						<text style="margin-left: 20rpx;">个人健康数据</text>
					</text>
					<text class="update-date">{{ formatDate(healthData.update_time) }}</text>
				</view>
				<view @click="getHealthy"
					style="width: 50rpx;height: 50rpx;background-color:#b7ffb9 ;border-radius: 50%;line-height: 60rpx;text-align: center;">
					<image src="/static/My/bianji.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
				</view>
			</view>
			<view style="border-bottom: 2rpx solid #ccc;height: 30rpx;"></view>


			<view class="health-data">
				<view class="data-row">
					<text class="data-label">身高 (cm)</text>
					<text class="data-value">{{ healthData.height || '--' }}cm</text>
				</view>
				<view class="data-row">
					<text class="data-label">体重 (kg)</text>
					<text class="data-value">{{ healthData.weight || '--' }}kg</text>
				</view>
				<view class="data-row">
					<text class="data-label">血压 (mmHg)</text>
					<text class="data-value">{{ healthData.blood_ressure || '--' }}mmHg</text>
				</view>
				<view class="data-row">
					<text class="data-label">血糖 (mmol/L)</text>
					<text class="data-value">餐前 {{ healthData.blood_sugar || '--' }}mmol/L</text>
				</view>
			</view>
		</view>

		<view class="divider"></view>

		<!-- 底部菜单 -->
		<view class="bottom-menu">
			<view class="menu-item">
				<view style="display: flex;">
					<image src="/static/My/Dizhi.png" mode="" style="width: 50rpx;height: 50rpx;"></image>
					<view style="margin-left: 20rpx;font-size: 30rpx;font-weight: bold;color: #757575;">地址管理</view>
				</view>
				<view style="font-size: 48rpx;color: #00dc05;">></view>
			</view>
			<view class="menu-item" @click="getZhuru">
				<view style="display: flex;">
					<image src="/static/My/Doctor.png" mode="" style="width: 50rpx;height: 50rpx;"></image>
					<view style="margin-left: 20rpx;font-size: 30rpx;font-weight: bold;color: #757575;">医生入驻</view>
				</view>
				<view style="font-size: 48rpx;color: #00dc05;">></view>
			</view>
			<view class="menu-item" @click="getLogin">
				<view style="display: flex;">
					<image src="/static/My/Tuichu.png" mode="" style="width: 50rpx;height: 50rpx;"></image>
					<view style="margin-left: 20rpx;font-size: 30rpx;font-weight: bold;color: #757575;">退出账号</view>
				</view>
				<view style="font-size: 48rpx;color: #00dc05;">></view>
			</view>
			<view class="menu-item">
				<view style="display: flex;">
					<image src="/static/My/Guanyu.png" mode="" style="width: 50rpx;height: 50rpx;"></image>
					<view style="margin-left: 20rpx;font-size: 30rpx;font-weight: bold;color: #757575;">关于</view>
				</view>
				<view style="font-size: 48rpx;color: #00dc05;">></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,onMounted
	} from 'vue'

	// 跳转到个人修改页面
	const getUser = () => {
		uni.navigateTo({
			url: '/pages/My/User/User'
		})
	}
	// 跳转到订单页面
	const getShop = () => {
		uni.navigateTo({
			url: '/pages/My/Shop/Shop'
		})
	}
	// 跳转添加健康页面
	const getHealthy = () => {
		uni.navigateTo({
			url: '/pages/My/Healthy/Healthy'
		})
	}
	// 跳转到登录页面
	const getLogin = () => {
		uni.removeStorageSync('token')
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/My/Login/Login'
			})
		}, 1000)

	}
	
    // 跳转到医生驻入页面
	const getZhuru=()=>{
		uni.navigateTo({
			url:'/pages/My/Zhuru/Zhuru'
		})
	}
	
	// 跳转到过往病史页面
	const getBingshi=()=>{
		uni.navigateTo({
			url:'/pages/My/Bingshi/Bingshi'
		})
	}
	// 核心修改：将userInfo定义为响应式ref变量
	const userInfo = ref(uni.getStorageSync('userInfo') || {});
	
	// 健康数据
	const healthData = ref({
		height: '',
		weight: '',
		blood_ressure: '',
		blood_sugar: '',
		update_time: ''
	});
	
	const formatDate = (dateString) => {
		if (!dateString) return '';
		// 只取日期部分（YYYY-MM-DD）
		return dateString.split('T')[0];
	};
	
	// 获取健康数据的函数
	const fetchHealthData = () => {
		const token = uni.getStorageSync('token');
		const currentUser = uni.getStorageSync('userInfo')
		uni.request({
			url: `http://localhost:3010/user/health?uid=${currentUser.uid}`,
			method: 'GET',
			header: {
				'Authorization': `Bearer ${token}`,
			},
			success: (res) => {
				console.log('健康数据请求结果:', res.data);
				if (res.data && res.data.data) {
					healthData.value = {
						height: res.data.data[0].height,
						weight: res.data.data[0].weight,
						blood_ressure: res.data.data[0].blood_ressure,
						blood_sugar: res.data.data[0].blood_sugar,
						update_time: res.data.data[0].update_time
					};
				}
			}
		});
	};
	onMounted(()=>{
		fetchHealthData()
	})
</script>

<style>
	.profile-container {
		padding: 20rpx;
		background-color: #e1e1e1;
		min-height: 100vh;
	}

	.user-info {
		margin-bottom: 30rpx;
		display: flex;
		padding: 20rpx;
	}

	.nav {
		width: 130rpx;
		height: 130rpx;
		background-color: #83ffc3;
		border-radius: 50%;
		/* margin-top: 60rpx; */
		/* margin-bottom: 100rpx; */
	}

	.username {
		font-size: 36rpx;
		font-weight: bold;
		display: block;
	}

	.birthdate {
		font-size: 28rpx;
		color: #666;
	}

	.section {
		margin-bottom: 30rpx;
		width: 90%;
		background-color: #fff;
		padding: 20rpx;
		margin: auto;
		color: #757575;
		border-radius: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		display: block;
		border-left: 13rpx solid #00ff06;
		margin-bottom: 15rpx;
	}

	.update-date {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 20rpx;
		display: block;
	}

	.function-buttons {
		display: flex;
		gap: 20rpx;
		margin-left: 30rpx;
	}

	.health-data {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
	}

	.data-row {
		display: flex;
		justify-content: space-between;
	}

	.data-row:last-child {
		border-bottom: none;
	}

	.data-label {
		font-size: 28rpx;
		color: #ababb8;
	}

	.data-value {
		font-size: 28rpx;
		font-weight: bold;
		color: #ababab;
	}

	.divider {
		height: 1rpx;
		/* background-color: #eee; */
		margin: 30rpx 0;
	}

	.bottom-menu {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 0 20rpx;
	}

	.menu-item {
		/* display: block; */
		padding: 25rpx 0;
		font-size: 28rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
	}

	.menu-item:last-child {
		border-bottom: none;
	}
</style>